<template>
  <div class="monitoring">
    <div class="container-box">
      <div class="page-container">
        <LeftContainer :tree="tree" @emitSel="getSel"></LeftContainer>
        <div class="preset-log right-container">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="事件内容">
              <el-input v-model="formInline.user" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker
                v-model="formInline.region"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button @click="formInline = {}" type="primary">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="">
            <!-- tab页面 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane :label="`推荐处理(${data1})`" name="first"></el-tab-pane>
              <el-tab-pane :label="`全部事件(${data2})`" name="second"></el-tab-pane>
            </el-tabs>
            <div style="margin:20px 0 20px">
              <el-button type="primary" style="margin-right: 30px"
              >批量处理
              </el-button
              >
              <el-radio-group v-model="tabPosition">
                <el-radio-button label="全部"></el-radio-button>
                <el-radio-button label="已读"></el-radio-button>
                <el-radio-button label="未读"></el-radio-button>
              </el-radio-group>
            </div>

            <!-- 表格部分 -->
            <el-table
              v-loading="loading"
              :data="roleList"
              :header-cell-style="{ background: '#F3F5FC' }"

            >
              <el-table-column type="selection" width="55" align="center"/>
              <el-table-column label="序号" align="center" width="80">
                <template slot-scope="scop">
                  {{ scop.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="攻击事件种类" prop="name"/>
              <el-table-column
                label="攻击事件级别"
                prop="level"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope">
   <span class="Inspan"
         :class="scope.row.level == '一般'?'simple':scope.row.level == '较大'?'big':scope.row.level == '重大'?'major':'serious'"
   >{{
       scope.row.level
     }}</span>
                </template>
              </el-table-column>
              <el-table-column label="源IP" prop="IP"/>
              <el-table-column label="目标IP" prop="targetIP"/>
              <el-table-column label="攻击频次">
                <template slot-scope="scope">

          <span class="Inspan"
                :class="scope.row.times == '正常'?'simple':scope.row.times == '一般'?'big':scope.row.times == '频繁'?'major':'series'"
          >{{
              scope.row.times
            }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="攻击影响范围"

              >
                <template slot-scope="scope">

          <span class="Inspan"
                :class="scope.row.area == '一般'?'simple':scope.row.area == '较大'?'big':scope.row.area == '重大'?'major':'series'"
          >{{
              scope.row.area
            }}</span>
                </template>
              </el-table-column>
              >
              <el-table-column
                label="操作"
                align="center"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="open = true"
                  >转工单
                  </el-button
                  >
                  <el-button
                    v-if="scope.row.parentId != 0"
                    size="mini"
                    type="text"
                    @click="$router.push('/eventlist')"
                  >详情
                  </el-button
                  >
                </template>

              </el-table-column>
            </el-table>
            <!-- 转工单对话框 -->
            <el-dialog
              title="转工单"
              :visible.sync="open"
              width="750px"
              append-to-body
              class="dia-style"
            >
              <form-1 :showSave="false"></form-1>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">保 存</el-button>
                <el-button @click="cancel">取 消</el-button>
              </div>
            </el-dialog>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import form1 from '@/components/security/moni/form1.vue'
import LeftContainer from '@/components/trees/LeftContainer.vue'

export default {
  components: { form1, LeftContainer },
  data() {
    return {
      data1: 12,
      data2: 64,
      tabPosition: '',
      open: false,
      //   表单
      formInline: {
        user: '',
        region: ''
      },
      activeName: 'second',
      // 总条数
      total: 14,
      //是否在加载
      loading: true,
      roleList: [
        {
          name: '暴力破解终端操作系统 ',
          level: '特别重大',
          IP: '207.226.141.205',
          targetIP: '202.111.192.102',
          times: '一般',
          area: '一般'
        },
        {
          name: '防火墙策略变化事件',
          level: '重大',
          IP: '117.212.201.63',
          targetIP: '202.111.*.* ',
          times: '频繁',
          area: '一般'
        }
        ,
        {
          name: '主机网络访问次数异常',
          level: '重大',
          IP: '201.69.161.108',
          targetIP: '101.32.152.12 ',
          times: '一般',
          area: '一般'
        }
        ,
        {
          name: '防火墙阻断异常IP访问',
          level: '一般',
          IP: '214.211.122.102',
          targetIP: '202.46.146.125 ',
          times: '一般',
          area: '一般'
        }
        ,
        {
          name: '堡垒机策略变化事件',
          level: '一般',
          IP: '154.246.154.92',
          targetIP: '202.111.192.122 ',
          times: '一般',
          area: '一般'
        }

      ],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      //   树形结构的值
      tree: [
        {
          title: '事件级别',
          name: 'sj',
          id: 1,
          showchild: true,
          child: [
            {
              title: '特别重大',
              num: 1,
              id: 1
            },
            {
              title: '重大',
              num: 2,
              id: 2
            },
            {
              title: '较大',
              num: 2,
              id: 3
            }
          ]
        },
        {
          title: '事件分类',
          name: 'jb',
          id: 2,
          showchild: true,
          child: [
            {
              title: '用户违规',
              num: 0,
              id: 4
            },
            {
              title: '运维异常',
              num: 0,
              id: 5
            },
            {
              title: '网络攻击',
              num: 5,
              id: 6
            }
          ]
        }
      ]
    }
  },
  methods: {
    // 获取子组件传参
    getSel(data) {
      this.checkList = data
    },
    // 提交的方法
    onSubmit() {
      this.showIndex = false
    },
    handleClick(tab, event) {
      // console.log(tab, event);
    } /** 查询角色列表 */,
    getList() {
      this.loading = true
      this.total = this.roleList.length
      this.loading = false
      // axios.get("test.json").then((res) => {
      //   this.roleList = res.data.data.list;
      //   this.total = res.data.data.total;
      //   this.loading = false;
      //   console.log(this.roleList);
      // });
    },
    submitForm() {
    },
    // 取消按钮
    cancel() {
      this.open = false
    }
  },
  mounted() {
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
.monitoring {
  height: 100%;
}
.container-box .page-container .right-container {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: auto;
  padding: 20px;
}
</style>

<style lang="scss">
.page-container {
  display: flex;
  flex: 1;
  height: 100%;
}

.preset-log {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-form {

    display: flex;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .page-container {
    margin-top: 0;
    width: 100%;
    flex: 1;

    .el-tabs__header {
      margin: 20px 0 !important;
    }
  }

  .baocun {
    display: none;
  }
}
</style>
